import React, { useState, useEffect, useCallback } from 'react';
import Counter from './counter';
import styles from './index.less';
// import axios from 'axios';
// axios.get('/react/api/header.json').then((res) => console.log(res));

const HookDemo = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  const [search, setSearch] = useState('');
  const handleChange = useCallback((e) => setSearch(e.target.value), [setSearch]);
  const increaseCounter = useCallback(() => setCount((prevCount) => prevCount + 1), [setCount]);
  const decrementCount = useCallback(() => setCount((prevCount) => prevCount - 1), [setCount]);

  return (
    <div className={styles.container}>
      <input type="text" onChange={handleChange} value={search} />
      <button type="button" onClick={increaseCounter}>+</button>
      <button type="button" onClick={decrementCount}>-</button>
      <Counter count={count} increaseCounter={increaseCounter}>count: </Counter>
    </div>
  );
};

export default HookDemo;
